<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>
// HTML5新增一种本地存储技术
// localStorage 永久性存储
// sessionStorage 会话存储(临时存储)

// h5本地存储的特征:
// 1.需要在服务器环境运行
// 2.按域名和浏览器存储
// 3.同一个网站的多个页面共享一套数据
// 4.存储空间为5MB左右
// 5.不会随着http请求自动发送给服务器
// 6.不能设置有效期,域名,路径
// 7.兼容性较差,有方便的API操作

// localStorage和sessionStorage的各种操作方法一样

// 设置
localStorage.setItem('user1','xiaohong');
localStorage.setItem('user2','xiaoming');
localStorage.setItem('user3','xiaofang');

// 删除
// localStorage.removeItem('user3');

// 修改
// localStorage.setItem('user2','xiaowang');

// 获取
// console.log( localStorage.getItem('user1') );// 'xiaohong'

// 获取指定索引位置的key
// console.log( localStorage.key(0) );// 'user3'
// console.log( localStorage.key(1) );// 'user2'

// 获取本地存储数据的长度
// console.log( localStorage.length );// 3

// 遍历所有本地存储数据
// for (var i = 0; i < localStorage.length; i++) {
//     console.log( localStorage.key(i) );
//     console.log( localStorage.getItem(localStorage.key(i)) );
// }

// 清除所有数据
// localStorage.clear();

</script>
</body>
</html>